<template>
  <div class="artistinfo">
    <!-- 左侧歌单大图 -->
    <div class="musicBox">
      <el-image
        style="width: 180px; height: 180px"
        :src="coverImgUrl"
        fit="fill"
      ></el-image>
    </div>

    <!-- 右侧歌单详情信息 -->
    <div class="detail">
      <div class="detail_name">
        <div>歌单</div>
        {{ songlistName }}
      </div>
      <div class="detail_img">
        <el-image
          style="width: 30px; height: 30px"
          :src="coverImgUrl"
          fit="fill"
        ></el-image>
        <div class="detail_creattime">
          {{ nickname }} <span>{{ createTime | dateFormat }} 创建</span>
        </div>
      </div>
      <div class="detail_operate">
        <el-button
          round
          size="medium"
          icon="el-icon-caret-right"
          type="danger"
          v-remove-focus
          >播放全部 <i class="el-icon-plus"></i
        ></el-button>
        <el-button round size="medium" icon="el-icon-folder-add" v-remove-focus
          >收藏</el-button
        >
        <el-button round size="medium" icon="el-icon-share" v-remove-focus
          >分享</el-button
        >
        <el-button round size="medium" icon="el-icon-download" v-remove-focus
          >下载全部</el-button
        >
      </div>
      <div class="detail_tag">标签 : <span>添加标签</span></div>
      <div class="detail_playnum">
        歌曲 : <span>{{ songNumber }}</span> 播放 : <span>{{ playCount }}</span>
      </div>
      <div class="detail_txt">简介 : <span>添加简介</span></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'artistinfo',

  data() {
    return {
      coverImgUrl: '',
      songlistName: '',
      nickname: '',
      createTime: '',
      songNumber: '',
      playCount: '',
    }
  },
  created() {},
  mounted() {
    this.getSonglistDetail(this.songlistId)
  },
  computed: {
    ...mapState(['songlistId']),
  },
  watch: {
    // 监听 songlistId ，当参数值发生变化时，执行以下方法
    // newVal: 现在的值  oldVal: 之前的值
    songlistId: function (newVal, oldVal) {
      const songlistId = newVal
      this.getSonglistDetail(songlistId)
    },
  },
  methods: {
    // 获取歌单的详细信息
    async getSonglistDetail(songlistId) {
      const { data: res } = await this.$http({
        url: `/playlist/detail?id=${songlistId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      // console.log(res.playlist)
      const detail = res.playlist

      this.coverImgUrl = detail.coverImgUrl
      this.songlistName = detail.name
      this.nickname = detail.creator.nickname
      this.createTime = detail.createTime
      this.songNumber = detail.trackCount
      this.playCount = detail.playCount
    },
  },
}
</script>


<style lang="less" scoped>
.artistinfo {
  overflow: auto;
  display: flex;
}

.musicBox {
  margin: 24px;
  /deep/ .el-image__inner {
    border-radius: 8px;
  }
}

.detail {
  margin: 24px 0;
  > .detail_name {
    display: flex;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 4px;

    > div {
      border: 1px solid red;
      height: 18px;
      font-size: 13px;
      font-weight: normal;
      padding: 0px 3px 1px 3px;
      border-radius: 4px;
      color: red;
      position: relative;
      top: 8px;
      margin-right: 8px;
    }
  }
  > .detail_img {
    margin-bottom: 6px;
    display: flex;

    > .detail_creattime {
      position: relative;
      top: 4px;
      left: 8px;
      font-size: 14px;
      color: #0b7ccb;
      > span {
        color: #768181;
        margin-left: 8px;
      }
    }

    /deep/ .el-image__inner {
      border-radius: 50%;
    }
  }
  > .detail_operate {
    margin-bottom: 8px;
    /deep/ .el-button--medium.is-round {
      padding: 6px 10px;
    }
    /deep/ i {
      font-size: 20px;
    }
    /deep/ span {
      position: relative;
      top: -3px;
    }
    /deep/ .el-icon-plus {
      position: relative;
      top: 3px;
    }
  }
  > .detail_tag {
    font-size: 14px;
    margin-bottom: 4px;
    color: #768181;
    > span {
      color: #0b7ccb;
      margin-left: 5px;
    }
  }
  > .detail_playnum {
    font-size: 14px;
    margin-bottom: 4px;
    color: #768181;
    > span {
      color: black;
      margin: 0 15px 0 5px;
    }
  }
  > .detail_txt {
    font-size: 14px;
    color: #768181;
    > span {
      color: #0b7ccb;
      margin-left: 5px;
    }
  }
}
</style>